<template>
  <div>
    <h1>登录页面</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
        <td align="right">账号</td>
        <td><input type="text" v-model="state.Username"/></td>
      </tr>
      <tr>
        <td align="right">密码</td>
        <td><input type="password" v-model="state.UserPwd"/></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="登陆" @click="login"/></td>
      </tr>
      </tbody>
     
    </table>
  </div>
</template>
<script setup lang="ts">
import { reactive,toRefs }  from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router'

//创建一个路由器作用可以实现页面跳转和传参
const router= useRouter();


let data: any =reactive({
  state:{
    Username:'',
    UserPwd:''
  }
})

let {state}= toRefs(data);


const login=()=>{
 //1.非空+有效验证
 
 if(state.value.Username==''){
  alert('用户名不能为空')
  return;
 }
 if(state.value.UserPwd==''){
  alert('密码不能为空')
  return;
 }
 let obj={
  Username:state.value.Username,
  UserPwd:state.value.UserPwd,
 }
 //2.发送网络请求
 axios({
    url:'/api/Admin/log/log',
    method:'get',
    params:obj,

 })
  .then((res)=>{
    console.log(res);
    if(res.data.data==null){
      alert('没有这个账号,请联系管理员')
      return;
    }
    else
    {
        router.push("/main")//实现页面跳转
    }
  })
  .catch((err)=>{
    console.log(err);
  })
}

</script>

<style lang="scss" scoped></style>
